<template>
  <div>
    <!--  判断规定的长度，超长截取，不超长正常展示  -->
    <span ref="mySpan" v-if="String(value).length > len">
      <span v-show="show">
        {{ value }}
        <span class="auto-btn" @click="toggleShow()">{{ show ? "收起" : "展开" }}</span>
      </span>
      <span v-show="!show">
        <!--  超长截取  -->
        {{ value.slice(0, len) }}
        <span class="auto-btn" @click="toggleShow()">{{ show ? "收起" : "展开" }}</span>
      </span>
    </span>
    <span v-else>
<!--  不超长正常展示  -->
      {{ value }}
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      row: "",
      value: "",
      show: false,
      valuelength: 10,
      len: 10,
    };
  },
  props: {
    rowData: Object,  //接收父组件传的当前行的数据
    rowName: String,  //接收父组件传的当前组件应展示数据的那个属性
    length: String,   // 接收父组件定义的当前组件应展示多少字符
  },
  updated() {
    this.$nextTick(() => {//监听组件内容高度
      const height = this.$refs.mySpan.offsetHeight;
      this.$emit("toggleHight", height);
    });
  },
  created() {
    this.row = this.rowData;
    this.valuelength = this.length;
    this.show = this.rowData.show;
    this.len = parseInt(this.valuelength);
    let item = this.row;
    let name = this.rowName;
    for (var key in item) {
      if (item.hasOwnProperty(key)) {
        if (key === name) { //根据当前接收的name 去匹配当前数据是否有此属性并展示
          this.value = item[key];
        }
      }
    }
  },
  mounted() {},
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
  },
};
</script>